<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h5 class="modal-title">平台</h5>
</div>
<div class="modal-body">
	<div class="rows">
        <div id="divUserInfo" class="col-xs-offset-1 col-xs-10 col-xs-offset-1">
			<form id="form-acc-user" class="form-horizontal">
					<input type="hidden" id="user-uuid" name="user.uuid" value="${user.uuid}">
                    <div class="form-group">
                        <label class="control-label col-xs-4 col-sm-3">
                            姓名：
                        </label>
                        <div class="col-xs-8 col-sm-9">
                            <input type="text" class="form-control input-sm" id="user-realname" name="user.realname" value="${user.realname}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-4 col-sm-3">
                            性别：
                        </label>
                        <div class="col-xs-8 col-sm-9">
                            <x:select models="${dictSel('CM-SEX')}"
                            	defaultOption="请选择"
								field="value,name" value="${user.sex}"
								id="user-sex" name="user.sex"
								class="chosen-select form-control" >
							</x:select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-4 col-sm-3">
                            区域：
                        </label>
                        <div class="col-xs-8 col-sm-9">
                            <input type="hidden" class="form-control input-sm" id="user-areaid" name="user.areaid" value="${user.areaid}">
                            <input type="text" class="form-control input-sm" id="showAreaName" name="showAreaName" value="" >
                            <div id="userAreaTreeCnt" style="display:none; position: absolute; z-index:100;background-color:#fff;width:325px;height:100px;overflow-y:auto;border:1px solid #ccc;border-top:0;">
								<ul id="treeUserArea" class="ztree" style="margin-top:0;"></ul>
							</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-4 col-sm-3">
                            身份证号：
                        </label>
                        <div class="col-xs-8 col-sm-9">
                            <input type="text" class="form-control input-sm" id="user-idcard" name="user.idcard" value="${user.idcard}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-4 col-sm-3">
                            联系方式：
                        </label>
                        <div class="col-xs-8 col-sm-9">
                            <input type="text" class="form-control input-sm" id="user-telphone" name="user.telphone" value="${user.telphone}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-4 col-sm-3">
                            详细地址：
                        </label>
                        <div class="col-xs-8 col-sm-9">
                            <textarea class="form-control input-sm" id="user-address" name="user.address" rows="2">${user.address}</textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-4 col-sm-3">
                            用户简介：
                        </label>
                        <div class="col-xs-8 col-sm-9">
                            <textarea class="form-control input-sm" id="user-intro" name="user.intro" rows="3">${user.intro}</textarea>
                        </div>
                    </div>
            </form>
		</div>
	</div>
</div> 
<div class="modal-footer clearfixed">
	<div class="rows">
		<div class="col-xs-12">
	    <button type="button" class="btn btn-info btn-xs no-border" onclick="updUser('system/admin/account/updUser', 'form-acc-user')">保存</button>
	    <button type="button" class="btn btn-info btn-xs no-border" data-dismiss="modal" aria-label="Close">关闭</button>
		</div>
	</div>
</div>
<script type="text/javascript">
	function updUser(url, formId){
		var params = getParams(formId);
		$.ajax({
			type : "POST",
			url : url,
			data : params,
			success : function(data) {
				if (data.status == "OK") {
					hideModal();
					TipMsg.success(data.message, 0);
				} else if (data.status == "ERROR") {
					TipMsg.error(data.message, 0);
				} else {
					var errors = data.errors;
					var msg = "";
					for ( var key in errors) {
						msg = errors[key];
					}
					TipMsg.error(msg, 0);
				}
			}
		});
	};
	var setting = {
		async: {
			enable: true,
			url:"system/admin/area/tree",
			autoParam:["uuid", "alevel"],
			dataFilter: ajaxFilter
		},
		view: {
			dblClickExpand: false
		},
		data: {
			simpleData: {
				enable: true,
				idKey: "uuid",
				pIdKey: "parentid",
				rootPId: null
			}
		},
		callback: {
			beforeClick: beforeClick,
			onClick: onClick,
			onAsyncSuccess: onAsyncSuccess
		}
	};
	
	function ajaxFilter(treeId, pNode, respData){
		var nodes = null;
		if(respData.status == 'OK'){
			nodes = respData.rows;
		}
		return nodes;
	}
	
	function beforeClick(treeId, treeNode) {
		var check = (treeNode && !(treeNode.alevel < 0));
		if (!check) alert("请选择有效区域...");
		return check;
	}
	
	function onClick(e, treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj(treeId),
		nodes = zTree.getSelectedNodes(),
		vid = "",
		vname = "";
		nodes.sort(function compare(a,b){return a.level-b.level;});
		if(nodes.length > 0){
			vid = nodes[0].uuid;
			vname = nodes[0].name;
		}
		var areaid = $("#user-areaid");
		var areaName = $("#showAreaName");
		areaid.attr("value", vid);
		areaName.attr("value", vname);
	}
	
	function onAsyncSuccess(event, treeId, treeNode, msg){
		console.log(msg);
		var areaid = $("#user-areaid").val();
		if(areaid !== ''){
			var zTree = $.fn.zTree.getZTreeObj(treeId);
			var nodes = zTree.getNodes();
			var flag = true;
			var arrayNodes =zTree.transformToArray(nodes)
			for(var i = 0, l = arrayNodes.length; i < l; i++){
				if(areaid === arrayNodes[i].uuid){
					$("#showAreaName").attr("value", arrayNodes[i].name);
				}
			}
			if(flag){
				asyncNodes(zTree, nodes);
			}
		}
	}

	function asyncNodes(zTree, nodes) {
		if (!nodes) return;
		for (var i=0, l=nodes.length; i<l; i++) {
			if (nodes[i].isParent && nodes[i].zAsync) {
				asyncNodes(zTree,nodes[i].children);
			} else {
				zTree.reAsyncChildNodes(nodes[i], "refresh", true);
			}
		}
	}

	function showMenu() {
		var areaName = $("#showAreaName");
		var areaNameOffset = $("#showAreaName").offset();
		//$("#userAreaTreeCnt").css({left:areaNameOffset.left + "px", top:areaNameOffset.top + areaName.outerHeight() + "px"}).slideDown("fast");
		$("#userAreaTreeCnt").slideDown("fast");
		$("#modal").bind("mousedown", onBodyDown);
	}
	function hideMenu() {
		$("#userAreaTreeCnt").fadeOut("fast");
		$("#modal").unbind("mousedown", onBodyDown);
	}
	function onBodyDown(event) {
		if (!(event.target.id == "showAreaName" || event.target.id == "userAreaTreeCnt" || $(event.target).parents("#userAreaTreeCnt").length > 0)) {
			hideMenu();
		}
	}
	$(document).ready(function(){
		var areaTree = $.fn.zTree.init($("#treeUserArea"), setting);
		$("#showAreaName").bind("focus", showMenu);
	});
</script>
